{% extends "layout.tpl" %}

{% block title %}{% endblock %}

{% block style %}
<link rel="stylesheet" type="text/css" href="/nui/pages/components/search/style/page-min.css"/>
{% endblock %}

{% block nav %}
	{% import 'nav.tpl' as nav %}
	{{nav.active('study')}}
{% endblock %}

{% block subpage %} class="g-html"{% endblock %}



{% block content %}
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">搜索</h1>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">先睹为快</h2>
			<div class="e-mt15 item">
				<input type="text" class="ui-input" id="demo1" data-input-options='{"text":"请输入姓名..."}'>
			</div>
			<div class="f-clearfix e-mt15 item">
				<div class="ui-input ui-input-auto demo2Tags f-fl">
					<div class="f-clearfix">
						<input type="text" id="demo2" data-input-options='{"text":"请输入员工或部门名称..."}'>
					</div>
				</div>
				<label class="f-fl e-mt15 e-ml15">
					<input type="checkbox" name="single"> 单选
				</label>
			</div>
			<div class="ui-input demo3Tags e-mt15">
				<div class="ui-input-auto">
					<div class="f-clearfix">
						<span class="ui-tag"><em class="con-tag-text" title="王福元">王福元</em><b class="con-tag-close">×</b></span>
						<input type="text" id="demo3" data-input-options='{"text":"请输入员工或部门名称..."}'>
					</div>
				</div>
			</div>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">选项参数</h2>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> url</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：请求url</p>
				<p>默认：''</p>
				<p>类型：{String}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> zIndex</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置层级</p>
				<p>默认：19920604</p>
				<p>类型：{Number}</p>
				<p>说明：若style中已经设置，则不使用该值</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> query</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置查询参数</p>
				<p>默认：'keyword'</p>
				<p>类型：{String}</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：value {String} 文本框输入值</p>
				<p>返回：{Object} 查询参数对象集合</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> item</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：定义列表模版</p>
				<p>默认：''</p>
				<p>类型：{String}</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>返回：{String} 返回列表模版</p>
				<p>说明：模版中可以使用<%$data%>获取当前行数据，<%$index%>获取当前行索引；
						配合选项参数selected方法在模版中类名中加入<%selected($data)%>可以设置当前行是否选中；
						模版中有效列表类名必须包含con-search-item以及data-index="<%$index%>"属性</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> empty</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：定义提示信息模版</p>
				<p>默认：''</p>
				<p>类型：{String}</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>返回：{String} 返回空数据时模版</p>
				<p>说明：模版中可以使用<%value%>获取当前输入值</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> prompt</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：定义输入时有结果返回提示模版</p>
				<p>默认：''</p>
				<p>类型：{String}</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>返回：{String} 返回提示模版</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> foot</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：定义底部模版</p>
				<p>默认：''</p>
				<p>类型：{String}</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>返回：{String} 返回底部模版</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> field</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置列表展示内容字段名</p>
				<p>默认：''</p>
				<p>类型：{String}</p>
				<p>说明：在展示列表时如果未使用item参数，将会展示该值内容</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> focus</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：是否在文本获取焦点时展示下拉</p>
				<p>默认：false</p>
				<p>类型：{Boolean}</p>
				<p>说明：设置true后组件内部会绑定focus事件，因此不建议手动绑定focus事件调用组件的同时将该参数设置为true，那样会导致事件重复绑定</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> nullable</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：是否允许文本框内容为空时展示下拉</p>
				<p>默认：false</p>
				<p>类型：{Boolean}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> cahce</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：搜索时是否缓存数据</p>
				<p>默认：false</p>
				<p>类型：{Boolean}</p>
				<p>说明：设置为true后，如果输入之前已经查询过的数据，那么不再执行查询，直接返回该数据</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> container</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：展示内容显示容器</p>
				<p>默认：'body'</p>
				<p>类型：{String} 选择器</p>
				<p>类型：{Object} DOM对象、jQuery对象</p>
				<p>类型：{Function} </p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>返回：{String, Object} 返回选择器或者元素对象</p>
				<p>说明：如果设置为body，创建的元素会基于搜索输入框进行定位，如果不是则基于该值定义的元素进行定位</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> limit</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：下拉列表的数量，超过出现滚动条</p>
				<p>默认：6</p>
				<p>类型：{Number}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> size</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：为展示元素增加高宽</p>
				<p>默认：null</p>
				<p>类型：{Object}</p>
				<p>属性：width {Number} 宽度</p>
				<p>属性：height {Number} 高度</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> offset</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置展示元素的偏移值</p>
				<p>默认：null</p>
				<p>类型：{Object}</p>
				<p>属性：top {Number} 顶部偏移值</p>
				<p>属性：left {Number} 左侧偏移值</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> style</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置组件元素样式</p>
				<p>默认：null</p>
				<p>类型：{Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> ajax</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：jQuery ajax配置</p>
				<p>默认：null</p>
				<p>类型：{Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> data</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：自定义列表数据</p>
				<p>默认：null</p>
				<p>类型：{Array}</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>返回：{Array} 返回自定义数据</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> tag</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：展示标签配置项</p>
				<p>类型：{Object}</p>
				<table class="data e-mt5">
					<tr>
						<th width="80">属性</th>
						<th width="80">默认值</th>
						<th width="80">类型</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>type</td>
						<td>''</td>
						<td>{String, Array}</td>
						<td>定义标签类型，设置后会在标签元素上增加类名ui-tag-名称</td>
					</tr>
					<tr>
						<td>close</td>
						<td>'×'</td>
						<td>{String}</td>
						<td>关闭按钮内容</td>
					</tr>
					<tr>
						<td>multiple</td>
						<td>false</td>
						<td>{Boolean}</td>
						<td>是否多选</td>
					</tr>
					<tr>
						<td>backspace</td>
						<td>false</td>
						<td>{Boolean}</td>
						<td>是否可以用退格键删除标签</td>
					</tr>
					<tr>
						<td>focus</td>
						<td>false</td>
						<td>{Boolean}</td>
						<td>点击叉号删除标签时是否使输入框获取焦点</td>
					</tr>
					<tr>
						<td>clear</td>
						<td>false</td>
						<td>{Boolean}</td>
						<td>选择完是否清空输入框，只有多选时才会启用</td>
					</tr>
					<tr>
						<td>title</td>
						<td>true</td>
						<td>{Boolean}</td>
						<td>鼠标悬停在标签上是否有提示</td>
					</tr>
					<tr>
						<td>container</td>
						<td>null</td>
						<td>{DOM, jQuery Object, Selector, Function}</td>
						<td>标签填充容器，该属性必填</td>
					</tr>
					<tr>
						<td>scroll</td>
						<td>null</td>
						<td>{DOM, jQuery Object, Selector, Function}</td>
						<td>设置滚动容器，未设置时默认取container属性</td>
					</tr>
					<tr>
						<td>getData</td>
						<td>null</td>
						<td>{Function}</td>
						<td>该方法会在标签元素遍历时执行，设置已选择的标签数据，存储在实例属性tagData中，返回对象必须包含text属性</td>
					</tr>
					<tr>
						<td>deleteMatch</td>
						<td>null</td>
						<td>{DOM, jQuery Object, Selector}</td>
						<td>检测已选中的标签是否可以删除</td>
					</tr>
				</table>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> tabs</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：设置多菜单</p>
				<p>默认：null</p>
				<p>类型：{Array}</p>
				<table class="data e-mt5">
					<tr>
						<th width="80">属性</th>
						<th width="80">默认值</th>
						<th width="80">类型</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>title</td>
						<td>''</td>
						<td>{String}</td>
						<td>菜单标题</td>
					</tr>
					<tr>
						<td>content</td>
						<td>''</td>
						<td>{String, Function}</td>
						<td>菜单内容</td>
					</tr>
					<tr>
						<td>onShow</td>
						<td>null</td>
						<td>{Function}</td>
						<td>菜单选中状态时回调</td>
					</tr>
				</table>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> match</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：过滤数据</p>
				<p>默认：null</p>
				<p>类型：{Array, Object}</p>
				<p>说明：该参数仅在使用自定义数据时才会启用,与filter参数互斥，优先使用filter</p>
				<table class="data e-mt5">
					<tr>
						<th width="80">属性</th>
						<th width="80">默认值</th>
						<th width="80">类型</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>field</td>
						<td>''</td>
						<td>{String}</td>
						<td>匹配字段名</td>
					</tr>
					<tr>
						<td>like</td>
						<td>''</td>
						<td colspan="2">
							<table class="data">
								<tr>
									<th width="80">类型</th>
									<th>说明</th>
								</tr>
								<tr>
									<td>{String}</td>
									<td>正则字符串，可使用{value}作为当前输入值占位符</td>
								</tr>
								<tr>
									<td>{Object}</td>
									<td>正则对象</td>
								</tr>
								<tr>
									<td>{Function}</td>
									<td>第一个参数为通过field获取的值，第二个参数为当前输入值，函数返回布尔类型</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> setValue</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：定义搜索列表选中数据</p>
				<p>默认：null 默认取field参数获取的值</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} 当前选中行数据</p>
				<p>返回：{String, Object} 如果选中后以标签展示，并且需要在标签中设置隐藏域，返回值必须是对象，必须包含text、fields属性</p>
			</div>

<script type="text/highlight" data-javascript-options>
import search from '{com}/search';

search({
	target:'#demo',
	tag:{
		container:'#container'
	},
	setValue:function(self, data){
		return {
			text:data.name,
			fields:{
				id:data.id,
				name:data.name
			}
		}
	}
})
</script>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> selected</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：检测列表是否被选中</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} 列表一行数据</p>
				<p>返回：{Boolean} 返回true表示被选中，列表class属性值会增加s-crt类</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> filter</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：过滤数据</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} 列表数据</p>
				<p>参数：value {String} 当前输入框的值</p>
				<p>返回：{Array} 返回过滤后的新数据</p>
				<p>说明：该参数仅在使用自定义数据时才会启用，与match参数互斥，优先使用该参数</p>
			</div>

<script type="text/highlight" data-javascript-options>
import search from '{com}/search';

search({
	target:'#demo',
	filter:function(self, data, value){
		var arr = [];
		Nui.each(data, function(v){
			if(v.name.indexOf(value) === 0){
				arr.push(v)
			}
		})
		return arr
	}
})
</script>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> exist</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：输入框失去焦点时校验内容是否存在</p>
				<p>默认：null</p>
				<p>类型：{Boolean} 为true时默认取field参数对应的字段</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} 遍历的列表一行数据</p>
				<p>参数：value {String} 当前输入框的值</p>
				<p>返回：{Boolean} 返回true则表示数据匹配</p>
				<p>说明：仅在单选功能才会启用</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onResponse</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：请求返回数据时触发回调</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Anything} 接口返回数据</p>
				<p>返回：{Array} 返回列表数据</p>
			</div>

<script type="text/highlight" data-javascript-options>
import search from '{com}/search';

search({
	target:'#demo',
	url:'//loclahost/data/',
	onResponse:function(self, data){
		return data.list
	}
})
</script>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onSelectBefore</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：选中列表前触发回调</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} 选中项数据</p>
				<p>参数：event {Object} 事件对象</p>
				<p>参数：elem {Object} 选中项jQuery对象</p>
				<p>返回：{Boolean} 返回false则不会触发setValue以及onSelect</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onSelect</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：选中列表后触发回调</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} 选中项数据</p>
				<p>参数：event {Object} 事件对象</p>
				<p>参数：elem {Object} 选中项jQuery对象</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onBlur</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：输入框失焦后触发</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：data {Object} exist参数启用时该参数才存在，表示已选中数据</p>
				<p>说明：不建议手动给元素绑定blur事件，应该使用该参数</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onChange</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：改变选中值后触发回调</p>
				<p>默认：null</p>
				<p>类型：{Function}</p>
				<p>参数：self {Object} 组件实例对象</p>
				<p>参数：event {Object} 事件对象，当手动删除标签时才会有该参数</p>
			</div>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例属性</h2>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> target</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：调用组件的对象</p>
				<p>类型：{jQuery Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> element</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：组件元素对象</p>
				<p>类型：{jQuery Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> container</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：展示列表所在容器对象</p>
				<p>类型：{jQuery Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> $result</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：搜索列表容器对象</p>
				<p>类型：{jQuery Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> $list</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：搜索列表对象，没有搜到内容时该值不存在</p>
				<p>类型：{jQuery Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> $tags</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：选中的标签元素对象</p>
				<p>类型：{jQuery Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> tagData</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：选中的标签数据集合</p>
				<p>类型：{Array}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> activeTab</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：当前选中状态菜单数据</p>
				<p>类型：{Object}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> data</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：选项参数data中获取的数据</p>
				<p>类型：{Array}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> queryData</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：查询后的结果数据</p>
				<p>类型：{Array}</p>
			</div>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例方法</h2>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> resize</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：重新计算组件元素的位置</p>
				<p>类型：{Function}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> show</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：显示组件元素</p>
				<p>类型：{Function}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> hide</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：隐藏组件元素</p>
				<p>类型：{Function}</p>
			</div>

			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> value</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：填充文本框内容或者添加tag标签</p>
				<p>类型：{Function}</p>
				<p>参数：data {String} 设置文本框内容</p>
				<p>参数：data {Object, Array} 添加tag标签，对象必须包含text属性，如果需要给标签添加隐藏域则必须包含fields属性；值为null时会清空标签或者文本框内容</p>
				<p>参数：add {Boolean} 如果为false则不会添加标签</p>
			</div>

<script type="text/highlight" data-javascript-options>
import search from '{com}/search';

var obj = search({
	target:'#demo',
	tag:{
		container:'#container'
	}
})

obj.value({
	text:'search组件'
})

obj.value([{
	text:'search组件',
	fields:{
		id:1
	}
}, {
	text:'search组件',
	fields:{
		id:2
	}
}])

obj.value(null) //清空
</script>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">类方法</h2>
			
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> data2html</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：将tag数据转为html模版</p>
				<p>类型：{Function}</p>
				<p>参数：data {String, Object, Array} 为对象类型时必须包含text属性，如果需要给标签添加隐藏域则必须包含fields属性</p>
				<p>参数：option {Object} 属性包含title、close、type，说明请参考选项参数tag</p>
			</div>
<script type="text/highlight" data-javascript-options>
import search from '{com}/search';

var arr = [{
	text:'search组件',
	fields:{
		id:1
	}
}, {
	text:'search组件',
	fields:{
		id:2
	}
}]

search.data2html(arr, {
	type:'gray'
})
</script>
			<p class="e-mt15">方法输出：</p>
<script type="text/highlight" data-xml-options>
<span class="ui-tag ui-tag-gray">
	<em class="con-tag-text" title="search组件">search组件</em>
	<b class="con-tag-close">×</b>
	<input type="hidden" name="id" value="1">
</span>
<span class="ui-tag ui-tag-gray">
	<em class="con-tag-text" title="search组件">search组件</em>
	<b class="con-tag-close">×</b>
	<input type="hidden" name="id" value="2">
</span>
</script>
		</div>	
	</div>
	{% import 'sidecol.tpl' as side %}
	{{side.active('cpns', 'search')}}
{% endblock %}

{% block script %}
Nui.load('./script/page')
{% endblock %}